﻿@page "/html-editor"

<RadzenExample Name="HtmlEditor">
    <div class="row">
        <div class="col-xl-6">
            <h3>Default set of tools</h3>
            <RadzenHtmlEditor @bind-Value=@value style="height: 500px; margin-bottom: 1rem;" UploadUrl="upload/image" Change=@OnChange Paste=@OnPaste Execute=@OnExecute />
        </div>
        <div class="col-xl-6">
            <h3>Custom set of tools (text-editing only)</h3>
            <RadzenHtmlEditor @bind-Value=@value style="height: 500px; margin-bottom: 1rem;" UploadUrl="upload/image" Change=@OnChange Paste=@OnPaste Execute=@OnExecute>
                <RadzenHtmlEditorUndo />
                <RadzenHtmlEditorRedo />
                <RadzenHtmlEditorSeparator />
                <RadzenHtmlEditorBold />
                <RadzenHtmlEditorItalic />
                <RadzenHtmlEditorUnderline />
                <RadzenHtmlEditorStrikeThrough />
                <RadzenHtmlEditorSeparator />
                <RadzenHtmlEditorColor />
                <RadzenHtmlEditorBackground />
                <RadzenHtmlEditorRemoveFormat />
            </RadzenHtmlEditor>
        </div>
    </div>
</RadzenExample>
<EventConsole @ref=@console />

@code {
    string value = @"
    <h1>Radzen.Blazor Getting Started Instructions</h1>
    <h2>1. Install</h2>
    <p>
        Radzen Blazor Components are distributed as the <a href=""https://www.nuget.org/packages/Radzen.Blazor/"">Radzen.Blazor</a> nuget package.
    </p>
    <p>
        You can add them to your project in one of the following ways
    </p>
    <ul>
        <li>Install the package from command line by running <code>dotnet add package Radzen.Blazor</code></li>
        <li>Add the project from the Visual Nuget Package Manager.</li>
    </ul>
    <h2>2. Import the namespace</h2>
    <p>
        Open the <code>_Imports.razor</code> file of your Blazor application and add these two lines <code>@using Radzen</code> and <code>@using Radzen.Blazor</code>.
    </p>
    <h2>3. Include a theme</h2>
    <p>
        Open the <code>_Host.cshtml</code> file (server-side Blazor) or <code>wwwroot/index.html</code> (client-side WebAssembly Blazor) and include a theme CSS file by adding this snippet 
        <code>&lt;link rel=""stylesheet"" href=""_content/Radzen.Blazor/css/default-base.css""&gt;</code>
        This version requires only the Radzen Blazor CSS. Optionally you can include Bootstrap.
    </p>
    <p>
        Alternatively you can include <code>&lt;link rel=""stylesheet"" href=""_content/Radzen.Blazor/css/default.css""&gt;</code> which embeds Bootstrap.
    </p>
    <h2>4. Include Radzen.Blazor.js</h2>
    <p>
        Open the <code>_Host.cshtml</code> file (server-side Blazor) or <code>wwwroot/index.html</code> (client-side WebAssembly Blazor) and include this snippet <code>&lt;script src=""_content/Radzen.Blazor/Radzen.Blazor.js""&gt;&lt;/script&gt;</code>
    </p>
    <h2>5. Use a component</h2>
    <p>
        Use any Radzen Blazor component by typing its tag name in a Blazor page e.g. <code>&lt;RadzenButton Text=""Hi""&gt;&lt;/RadzenButton&gt;</code>
    </p>
    <h4>Setting a property</h4>
<pre>
<code>
&lt;RadzenButton Text=""@text""&gt;&lt;/RadzenButton&gt;
@code {
  string text = ""Hi"";
}
</code>
</pre>
    <h4>Handing events</h4>
<pre>
<code>
&lt;RadzenButton Click=""@ButtonClicked"" Text=""Hi""&gt;&lt;/RadzenButton&gt;
@code {
  void ButtonClicked()
  {
    //
  }
}
</code>
</pre>
    ";

    EventConsole console;

    void OnPaste(HtmlEditorPasteEventArgs args)
    {
        console.Log($"Paste: {args.Html}");
    }

    void OnChange(string html)
    {
        console.Log($"Change: {html}");
    }

    void OnExecute(HtmlEditorExecuteEventArgs args)
    {
        console.Log($"Execute: {args.CommandName}");
    }
}